import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:kq_flutter_core_widget/utils/kq_screen_util.dart';

class TwoButtonSeekBar extends StatefulWidget {
  /// 第一段进度条颜色
  final Color? colorStartProgress;

  /// 第二段进度条颜色
  final Color? colorCenterProgress;

  /// 第三段进度条颜色
  final Color? colorEndProgress;

  /// 进度条宽度
  final double? widthProgress;

  /// 进度条高度
  final double? heightProgress;

  /// 进度条最大值
  final double? valueMaxProgress;

  /// 第一个seekbar位置
  final double? valueOneSeekBar;

  /// 第二个seekbar位置
  final double? valueTwoSeekBar;

  /// 第一个seekbar颜色
  final Color? colorOneSeekBar;

  /// 第二个seekbar颜色
  final Color? colorTwoSeekBar;

  /// seekbar宽度
  final double? widthSeekBar;

  /// seekbar高度
  final double? heightSeekBar;

  /// seekbar上文本颜色
  final Color? colorProgressText;

  /// seekbar上文本大小
  final double? sizeProgressText;

  /// 第一个按钮文本格式化
  final String Function(String value)? oneSeekBarValueFormat;

  /// 第二个按钮文本格式化
  final String Function(String value)? twoSeekBarValueFormat;

  /// seekbar的值的回调
  final Function(double one, double two)? onSeekBarCallback;

  const TwoButtonSeekBar(
      {super.key,
      this.colorStartProgress,
      this.colorCenterProgress,
      this.colorEndProgress,
      this.widthProgress,
      this.heightProgress,
      this.valueMaxProgress,
      this.valueOneSeekBar,
      this.valueTwoSeekBar,
      this.colorOneSeekBar,
      this.colorTwoSeekBar,
      this.widthSeekBar,
      this.heightSeekBar,
      this.colorProgressText,
      this.sizeProgressText,
      this.onSeekBarCallback,
      this.oneSeekBarValueFormat,
      this.twoSeekBarValueFormat});

  @override
  State<StatefulWidget> createState() => _TwoButtonSeekBarState();
}

class _TwoButtonSeekBarState extends State<TwoButtonSeekBar> {
  PointerEvent? _event;

  /// 按下是否命中目标
  bool _isHit = true;

  /// 是否点击中了第一个seekbar
  bool _isHitOneSeekBar = true;

  /// 第一个seekbar的值
  double? _seekOneValue;

  /// 第二个seekbar的值
  double? _seekTwoValue;

  /// 减少误差的偏移
  double _offset = 0;

  @override
  void initState() {
    super.initState();
    _seekOneValue = widget.valueOneSeekBar;
    _seekTwoValue = widget.valueTwoSeekBar;
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onVerticalDragUpdate: (_) {},
        child: RepaintBoundary(
            child: SizedBox(
                width: widget.widthProgress ?? 400.r,
                height:
                    ((widget.heightProgress ?? 0) > (widget.heightSeekBar ?? 0))
                        ? widget.heightProgress ?? 20.r
                        : widget.heightSeekBar ?? 20.r,
                child: Listener(
                  child: CustomPaint(
                    painter: _SeekBarPrinter(
                        this,
                        _seekOneValue ?? 100.r,
                        _seekTwoValue ?? 200.r,
                        _offset,
                        _isHitOneSeekBar,
                        _event, (isHit, isHitOneSeekBar, offset) {
                      //保存是否点击中seekbar的状态
                      _isHit = isHit;
                      //保存是否点中第一个seekbar的状态
                      _isHitOneSeekBar = isHitOneSeekBar;
                      //保存点击在seekbar上离中心点的偏移值，方便计算实际移动值
                      _offset = offset;
                    }, (one, two) {
                      //保存第一个seekbar进度
                      _seekOneValue = one;
                      //保存第二个seekbar进度
                      _seekTwoValue = two;
                      if (widget.onSeekBarCallback != null) {
                        //回调进度条seekbar的值
                        widget.onSeekBarCallback!(one, two);
                      }
                    }),
                  ),
                  onPointerDown: (PointerDownEvent event) =>
                      setState(() => _event = event),
                  onPointerMove: (PointerMoveEvent event) {
                    if (_isHit) {
                      setState(() => _event = event);
                    }
                  },
                  onPointerUp: (PointerUpEvent event) {
                    if (_isHit) {
                      setState(() => _event = event);
                    }
                  },
                ))));
  }
}

class _SeekBarPrinter extends CustomPainter {
  /// state
  final _TwoButtonSeekBarState state;

  /// 点击事件
  final PointerEvent? _event;

  /// 点击是否击中都会回调
  final Function(bool isHit, bool isHitOneSeekBar, double offset)? _hitCallback;

  /// seekbar数据改变时回调
  final Function(double seekOneValue, double seekTwovalue)? _onSeekBarCallback;

  /// 第一个seekbar的位置值
  double _seekOneValue;

  /// 第二个seekbar的位置值
  double _seekTwoValue;

  /// 是否点击中了第一个seekbar
  final bool _isHitOneSeekBar;

  /// 减少误差的偏移
  final double _offset;

  _SeekBarPrinter(
      this.state,
      this._seekOneValue,
      this._seekTwoValue,
      this._offset,
      this._isHitOneSeekBar,
      this._event,
      this._hitCallback,
      this._onSeekBarCallback);

  @override
  void paint(Canvas canvas, Size size) {
    //事件点击的中心位置
    Offset? eventOffset = _event?.localPosition;
    //事件点击的中心位置移动量
    double? eventDx = eventOffset?.dx;
    // seekbar的宽度
    double widthSeekBar = state.widget.widthSeekBar ?? 40.r;
    // seekbar的高度
    double heightSeekBar = state.widget.heightSeekBar ?? 20.r;
    //判断按下时是否按在seekbar上
    if (_event is PointerDownEvent) {
      if ((eventDx! - _seekOneValue).abs() <= widthSeekBar / 2) {
        //是否按在第一个seekbar上
        _hitCallback!(true, true, eventDx - _seekOneValue);
      } else if ((eventDx - _seekTwoValue).abs() <= widthSeekBar / 2) {
        //是否按在第二个seekbar上
        _hitCallback!(true, false, eventDx - _seekTwoValue);
      } else {
        //未按在seekbar上
        _hitCallback!(false, true, 0);
      }
    }
    //是移动和抬起手势时执行seekbar的移动相关动画
    if (_event is PointerMoveEvent || _event is PointerUpEvent) {
      //当按下时在第一个seekbar上执行以下代码
      if (_isHitOneSeekBar) {
        //移动偏移量
        double moveDx = eventDx! - _seekOneValue - _offset;
        //第一个seekbar的位置
        _seekOneValue += moveDx;
        //范围限定
        if (_seekOneValue <= 0) {
          //小于最小值
          _seekOneValue = 0;
        } else if (_seekOneValue >= (state.widget.valueMaxProgress ?? 300.r)) {
          //大于最大值
          _seekOneValue = state.widget.valueMaxProgress ?? 300.r;
        } else if (_seekOneValue >= _seekTwoValue) {
          //大于第二个seekbar
          _seekTwoValue = _seekOneValue;
        }
      } else {
        //当按下时在第二个seekbar上执行以下代码
        //移动偏移量
        double moveDx = eventDx! - _seekTwoValue - _offset;
        //第二个seekbar的位置
        _seekTwoValue += moveDx;
        //范围限定
        if (_seekTwoValue <= 0) {
          //小于最小值
          _seekTwoValue = 0;
        } else if (_seekTwoValue >= (state.widget.valueMaxProgress ?? 300.r)) {
          //大于最大值
          _seekTwoValue = state.widget.valueMaxProgress ?? 300.r;
        } else if (_seekTwoValue <= _seekOneValue) {
          //小于第一个seekbar
          _seekOneValue = _seekTwoValue;
        }
      }
      //回调两个seekbar的当前值
      _onSeekBarCallback!(_seekOneValue, _seekTwoValue);
    }

    //进度条的宽高
    double heightProgress = state.widget.heightProgress ?? 10.r;
    double widthEndProgress = state.widget.widthProgress ?? 300.r;
    //第一段进度条的rect
    Rect rect1 = Rect.fromCenter(
        center: Offset(widthEndProgress / 2, heightProgress),
        width: widthEndProgress,
        height: heightProgress);
    //第二段进度条的rect
    Rect rect2 = Rect.fromCenter(
        center: Offset(_seekTwoValue / 2, heightProgress),
        width: _seekTwoValue,
        height: heightProgress);
    //第三段进度条的rect
    Rect rect3 = Rect.fromCenter(
        center: Offset(_seekOneValue / 2, heightProgress),
        width: _seekOneValue,
        height: heightProgress);
    //画笔
    final Paint paint = Paint()
      ..strokeCap = StrokeCap.round
      ..isAntiAlias = true
      ..style = PaintingStyle.fill;
    paint.color = state.widget.colorEndProgress ?? const Color(0xFF73D13D);
    //先画第三段进度条
    canvas.drawRRect(
        RRect.fromRectAndRadius(rect1, const Radius.circular(100000)), paint);
    paint.color = state.widget.colorCenterProgress ?? Colors.grey;
    //再画第二段进度条
    canvas.drawRRect(
        RRect.fromRectAndRadius(rect2, const Radius.circular(100000)), paint);
    paint.color = state.widget.colorStartProgress ?? const Color(0xFFFAAD14);
    //最后画第一段进度条
    canvas.drawRRect(
        RRect.fromRectAndRadius(rect3, const Radius.circular(100000)), paint);
    //两个seekbar的rect
    Rect rectSeekOne = Rect.fromCenter(
        center: Offset(_seekOneValue, heightSeekBar / 2),
        width: widthSeekBar,
        height: heightSeekBar);
    Rect rectSeekTwo = Rect.fromCenter(
        center: Offset(_seekTwoValue, heightSeekBar / 2),
        width: widthSeekBar,
        height: heightSeekBar);

    paint.color = state.widget.colorOneSeekBar ?? Colors.white;
    //画第一个seekbar
    canvas.drawRRect(
        RRect.fromRectAndRadius(rectSeekOne, const Radius.circular(4)), paint);
    paint.color = state.widget.colorTwoSeekBar ?? Colors.white;
    //画第二个seekbar
    canvas.drawRRect(
        RRect.fromRectAndRadius(rectSeekTwo, const Radius.circular(4)), paint);

    //测量第一个seekbar上文字的宽度
    String oneStr = state.widget.oneSeekBarValueFormat
            ?.call(_seekOneValue.toInt().toString()) ??
        _seekOneValue.toInt().toString();
    TextPainter textPainter = TextPainter(
        text: TextSpan(
            text: oneStr,
            style: TextStyle(
                color: Colors.black54,
                fontSize: state.widget.sizeProgressText ?? 14.sp)),
        maxLines: 1,
        textDirection: TextDirection.ltr)
      ..layout(minWidth: 0, maxWidth: double.infinity);
    //画第一个seekbar上的文字
    ui.ParagraphBuilder paragraphBuilder =
        ui.ParagraphBuilder(ui.ParagraphStyle())
          ..pushStyle(ui.TextStyle(
              color: state.widget.colorProgressText ?? Colors.black54,
              fontSize: state.widget.sizeProgressText ?? 14.sp))
          ..addText(oneStr);
    ui.ParagraphConstraints paragraphConstraints =
        ui.ParagraphConstraints(width: size.width);
    ui.Paragraph paragraph = paragraphBuilder.build()
      ..layout(paragraphConstraints);
    canvas.drawParagraph(
        paragraph, Offset(_seekOneValue - textPainter.width / 2, 0));
    //测量第二个seekbar上文字的宽度
    String twoStr = state.widget.twoSeekBarValueFormat
            ?.call(_seekTwoValue.toInt().toString()) ??
        _seekTwoValue.toInt().toString();
    TextPainter textPainter2 = TextPainter(
        text: TextSpan(
            text: twoStr,
            style: TextStyle(
                color: Colors.black54,
                fontSize: state.widget.sizeProgressText ?? 14.sp)),
        maxLines: 1,
        textDirection: TextDirection.ltr)
      ..layout(minWidth: 0, maxWidth: double.infinity);
    //画第二个seekbar上的文字
    ui.ParagraphBuilder paragraphBuilder2 =
        ui.ParagraphBuilder(ui.ParagraphStyle())
          ..pushStyle(ui.TextStyle(
              color: state.widget.colorProgressText ?? Colors.black54,
              fontSize: state.widget.sizeProgressText ?? 14.sp))
          ..addText(twoStr);
    ui.ParagraphConstraints paragraphConstraints2 =
        ui.ParagraphConstraints(width: size.width);
    ui.Paragraph paragraph2 = paragraphBuilder2.build()
      ..layout(paragraphConstraints2);
    canvas.drawParagraph(
        paragraph2, Offset(_seekTwoValue - textPainter2.width / 2, 0));
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}
